<template>
  <div class="chat-container">
    <div class="chat-window">
      <div
        v-for="(msg, index) in messages"
        :key="index"
        :class="['message', msg.type]"
      >
        <div class="message-header">
          {{ msg.type === "user" ? "您" : "助手" }}
        </div>
        <div class="message-content">{{ msg.content }}</div>
      </div>
    </div>

    <div class="input-area">
      <textarea
        v-model="inputText"
        @keyup.enter.exact="sendQuestion"
        placeholder="请输入关于新能源制氢的问题..."
      ></textarea>
      <a-button
        type="primary"
        @click="sendQuestion"
        :disabled="isLoading"
        class="send"
      >
        {{ isLoading ? "生成中..." : "发送" }}
      </a-button>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { ref } from "vue";

const inputText = ref("");
const messages = ref([]);
const isLoading = ref(false);

// 提交问题方法
const sendQuestion = async () => {
  if (!inputText.value.trim() || isLoading.value) return;

  const question = inputText.value.trim();
  messages.value.push({ type: "user", content: question });
  inputText.value = "";
  isLoading.value = true;

  try {
    const response = await axios.post("http://localhost:8080/api/qa/ask", {
      question: question,
    });

    messages.value.push({
      type: "assistant",
      content: response.data.answer,
      context: response.data.context,
    });
  } catch (error) {
    messages.value.push({
      type: "error",
      content: "请求失败: " + (error.response?.data?.message || error.message),
    });
  } finally {
    isLoading.value = false;
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

#basicLayout {
  width: 100%;
  height: 100%;
}

.chat-container {
  display: block; /* 改为块级布局 */
  max-width: 800px;
  margin: 84px auto 20px; /* 上边距需要包含导航栏高度 */
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #f8f9fa;
}

.chat-window {
  width: 600px;
  height: 600px;
  overflow-y: auto;
  margin: 0 auto 20px;
  padding: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.message {
  margin: 15px 0;
  padding: 15px;
  border-radius: 8px;
}

.message-header {
  font-weight: 600;
  margin-bottom: 8px;
  color: #666;
}

.message-context h4 {
  margin: 0 0 8px 0;
  font-size: 0.9em;
  color: #444;
}

.input-area {
  display: flex;
  gap: 10px;
  margin: 0 auto;
}

textarea {
  flex: 1;
  min-height: 80px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  resize: vertical;
  font-size: 16px;
}

.send {
  min-height: 80px;
  padding: 12px 24px;
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

button:disabled {
  background: #90caf9;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background: #1976d2;
}
</style>

<!--.message.user {-->
<!--background: #e3f2fd;-->
<!--margin-left: 20%;-->
<!--}-->

<!--.message.assistant {-->
<!--background: #f5f5f5;-->
<!--margin-right: 20%;-->
<!--}-->

<!--.message.error {-->
<!--background: #ffebee;-->
<!--border: 1px solid #ffcdd2;-->
<!--}-->

<!--.message-context {-->
<!--margin-top: 10px;-->
<!--padding: 10px;-->
<!--background: rgba(255, 255, 255, 0.8);-->
<!--border-radius: 6px;-->
<!--font-size: 0.9em;-->
<!--color: #666;-->
<!--}-->

<!--        <div v-if="msg.context" class="message-context">-->
<!--          <h4>参考依据：</h4>-->
<!--          <ul>-->
<!--            <li v-for="(item, idx) in msg.context" :key="idx">{{ item }}</li>-->
<!--          </ul>-->
<!--        </div>-->
